<template>
  <div class="create-job">
    <div class="header">
      <button @click="$emit('go-back')">返回</button>
    </div>
    <div class="env-id">环境ID: {{ env_id }}</div>
    <form @submit.prevent="submitJob">
      <div class="form-row">
        <label>*并行计算数量</label>
        <div>
          <input 
            type="number" 
            v-model="parallelCount"
            min="1"
            max="100"
            required
            class="count-input"
            placeholder="输入1-100之间的整数"
          >
        </div>
      </div>
      
      <div class="form-row">
        <label>*并行计算任务配置</label>
        <div>
          <input 
            type="file" 
            ref="parallelConfig" 
            required
            @change="handleParallelFileChange"
            accept=".py"
          >
          <button type="button" @click="$refs.parallelConfig.click()">上传</button>
        </div>
      </div>
      <div class="form-row">
        <label>聚合计算任务配置</label>
        <div>
          <input 
            type="file" 
            ref="aggregateConfig" 
            @change="handleAggregateFileChange"
          >
          <button type="button" @click="$refs.aggregateConfig.click()">上传</button>
        </div>
      </div>
      <button type="submit" class="submit-btn">Submit</button>
    </form>
    <Toast v-if="showToast" :message="toastMessage" @close="showToast = false" />
  </div>
</template>

<script>
import { ref } from 'vue'
import { submitJob } from '../../api/jobs'
import Toast from '../common/Toast.vue'

export default {
  components: { Toast },
  props: {
    env_id: {
      type: String,
      required: true
    }
  },
  setup(props, { emit }) {
    const parallelFile = ref(null)
    const aggregateFile = ref(null)
    const showToast = ref(false)
    const toastMessage = ref('')
    const parallelCount = ref(4) // 默认设置为4个并行计算

    const handleParallelFileChange = (e) => {
      parallelFile.value = e.target.files[0]
    }

    const handleAggregateFileChange = (e) => {
      aggregateFile.value = e.target.files[0]
    }

    const submitJobHandler = async () => {
      if (parallelCount.value < 1 || parallelCount.value > 100) {
        showToastMessage('并行计算数量必须在1-100之间')
        return
      }
      
      try {
        await submitJob(props.env_id, parallelCount.value, parallelFile.value, aggregateFile.value)
        showToastMessage('Job提交成功')
        emit('job-submitted')
      } catch (error) {
        showToastMessage('Job提交失败')
        console.error('Failed to submit job:', error)
      }
    }

    const showToastMessage = (message) => {
      toastMessage.value = message
      showToast.value = true
      setTimeout(() => {
        showToast.value = false
      }, 3000)
    }

    return {
      parallelFile,
      aggregateFile,
      showToast,
      toastMessage,
      handleParallelFileChange,
      handleAggregateFileChange,
      submitJob: submitJobHandler
    }
  }
}
</script>

<style scoped>
.create-job {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.env-id {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 4px;
}

.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-row div {
  display: flex;
  align-items: center;
}

input[type="file"] {
  display: none;
}

button {
  padding: 5px 10px;
  margin-left: 10px;
  cursor: pointer;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  margin-top: 20px;
}
</style>
